<template>
  <el-container v-if="!is_compare" class="main-box">
    <el-main ref="Box">
      <el-header>
        <div class="top-head">
          <div class="flex flex-a">
            <div class="float-man-l-img">
              {{ user_name.substring(user_name.length - 2) }}
            </div>
            <div class="head-text f-w-700">{{user_name}}的日记录</div>
          </div>
          <div class="top-head-content flex flex-a flex-1">
            <span
              class="top-text"
              @click="time_or_list = !time_or_list"
            >
              {{ time_or_list ? '切换至列表导航视图' : '切换至时间导航视图' }}
            </span>
            <div v-show="!time_or_list"  @click="handleExportTable"
                 :style="is_loading?'color: #666666;':'color: #1966E2'"
                 class="flex flex-a cursor-p export-text">
              <svg-icon class="f-s-20"
                        style="margin-right: 4px;" class-name="m-r-7" icon-class="appraiseout"/>
              <span class="f-s-20">导出</span>
            </div>
            <div @click="fondDiary" v-show="time_or_list" class="f-s-16-1 top-text">查询</div>
            <el-date-picker
              v-show="time_or_list"
              class="search-text help—change"
              type="dates"
              v-model="date_list"
              placeholder="选择日期"
              @change="selectTime"
            />
            <el-input
              v-show="time_or_list"
              class="search-text help—change"
              placeholder="请输入内容"
              v-model="search_text"
              clearable>
            </el-input>
          </div>
        </div>
      </el-header>
      <el-scrollbar class="person_body" :style="time_or_list?'height: calc(100vh - 184px);':'height: calc(100vh - 220px);'">
        <div v-if="time_or_list" class="my-duty" v-for="(item, index) in time_list" :key="index"
             :style="index !== time_list.length-1?'margin-bottom:12px':''">
          <div class="box-card flex">
            <div class="flex-1">
              <div>
                <div class="card-head" :ref="index">
                  <div class="f-s-20 color-1966E2 flex flex-a">
                    <i class="el-icon-time"
                       style="color: #1966E2; font-size: 24px; background-color: #fff; margin-right: 7px"/>
                    <span class="f-w-700">{{ item.recordDate }}</span>
                  </div>
                  <header-features v-show="item.contentList.length"
                                   :id="user_id"
                                   :type_num="0"
                                   :record_date="item.recordDate"
                                   router_type="record"
                                   is_text
                  />
                </div>
                <!--  第0项取默认值  -->
                <eit-content :personal_eit="user_id === my_id"
                             is_operating
                             :userList="userList"
                             is_status
                             is_align
                             is_category
                             is_time_limit
                             isAit
                             :text="item.contentList"
                             :mouth_List="mouth_List"
                             router_type="record"
                             :is_add_content="user_id === my_id"
                             :font_size="font_change.font_size"
                             :font_family="font_change.font_family"
                             :type_content="font_change.type_content"
                             :type_num="0"
                             @handleAddDuty="handleAddDuty($event,item,index)"
                             @handleEitContent="handleEitContent($event,index)"
                             @handleDeleteDuty="handleDeleteDuty($event,index)"
                />
              </div>
            </div>
          </div>
        </div>
        <div v-if="!time_or_list" class="my-duty">
          <div class="box-form">
            <div class="form-content-1 b-b-1">
              <div class="f-s-16">类型:</div>
              <div>
                <el-checkbox v-for="(item, index) in form_type" :key="index"
                             v-model="item.is_checked">{{ item.text }}</el-checkbox>
              </div>
            </div>
            <div class="form-content b-b-1">
              <span class="f-s-16">记录时间:</span>
              <div>
                <el-checkbox v-for="(item, index) in time_range" :key="index"
                             v-model="item.is_checked"
                             @change="handleChangeTime(index)">{{ item.text }}</el-checkbox>
              </div>
            </div>
            <div class="form-content">
              <span class="f-s-16">时间范围:</span>
              <div>
                <el-date-picker
                  ref="timePicker"
                  size="mini"
                  style="width: 228px;"
                  is-range
                  v-model="time_limit"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  placeholder="选择时间范围"
                  @change="confirmTimeLimit"
                />
              </div>
            </div>
            <div class="form-content">
              <div class="inquire cursor-p" @click="handleInquire">查询</div>
              <el-table
                :data="table_items"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'left'}"
                style="width: 100%;font-size: 16px;"
                border
                :span-method="objectSpanMethod"
              >
                <el-table-column
                  label="日期"
                  width="112"
                >
                  <template slot-scope="{row}">
                    <div style="text-align: center;">
                      {{ row.time_date }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="类型"
                  width="71"
                >
                  <template slot-scope="{row}">
                    <div style="text-align: center;">
                      {{ row.recordClass | typeStr }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="内容"
                >
                  <template slot-scope="{row}">
                    <div style="display: flex;">
                      <span class="content-bit">{{ row.text_index }}</span>
                      <span class="content-text-1" v-html="row.content"></span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="进度"
                  width="92"
                >
                  <template slot-scope="{row}">

                    <div class="flex flex-a flex-j">
                      <el-progress color="#1A66E2"
                                   :width="20"
                                   :text-inside="true"
                                   type="circle"
                                   :percentage="Number(row.progress)"
                      />
                      <span
                        class="jin-du">{{ row.progress }}%</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="address"
                  align="center"
                  label="时间"
                  width="140"
                >
                  <template slot-scope="{row,$index}">
                    <div style="text-align: center;">
                      <div class="content-text-2">
                        {{ row.startTime?row.startTime:'暂无' }}~{{ row.endTime?row.endTime:'暂无' }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div v-show="!time_or_list" style="width: 100%;height: 35px;padding-right: 12px;">
        <el-pagination
          style="height: 100%;background-color: #FFFFFF;border-top: 1px solid rgba(0,0,0,0.04);
          border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;"
          :page-size="Number(pagination.pageRows)"
          :pager-count="11"
          layout="prev, pager, next"
          :total="Number(pagination.total)"
          @current-change="currentChange"
        />
      </div>
    </el-main>
    <el-aside width="300px">
      <mail-list
        class="mail-list"
        :duty_list="duty_list"
        :float_list="float_list"
        :duty_index="0"
        router_type="record"
        @handleManDuty="handleManDuty"
        @recordCompared="recordCompared"
      />
      <!--      <SideList  />-->
    </el-aside>
  </el-container>
  <div v-else>
    <el-container class="main-box-1">
      <el-header>
        <div class="head">
          <div class="head-left">
            <div v-show="name_list.length" class="f-s-20">
              <span>关于</span>
              <span class="f-w-700">{{ name_list.join('与') }}</span>
              <span>的对比</span>
            </div>
            <div class="compared cursor-p" @click="handleCompared">
              <span>更多人员对比 ></span>
            </div>
          </div>
          <div class="head-right">
            <button class="btn-switch cursor-p"
                    @click="handleChange">
              <svg-icon class="f-s-16-1"
                        style="color: #FFFFFF" :icon-class="is_switchover === 0?'appraiseheng':'appraisezong'"/>
              {{ is_switchover === 0 ? '纵向布局' : '横向布局' }}
            </button>
            <button class="btn-unified cursor-p" @click="handleExport">
              <svg-icon class="f-s-16-1"
                        style="color: #1966E2" icon-class="appraiseout"/>
              导出
            </button>
            <button class="btn-unified cursor-p" @click="handleStopCompare">
              结束对比
            </button>
            <button class="btn-unified cursor-p" v-if="false">
              <img src="@/assets/appraise/icon/contrast_dayin.png" alt="">
              打印
            </button>
          </div>
        </div>
      </el-header>
      <el-main ref="Box">
        <div class="content my-duty-1">
          <compared-plan-table-across v-if="compared_list.length && is_change_table === 0"
                                      router_type="record"
                                      :compared_type="compared_type"
                                      :compared_list="compared_list"/>
          <compared-plan-table-endlong v-if="compared_list.length && is_change_table === 1"
                                       router_type="record"
                                       :compared_type="compared_type"
                                       :compared_list="compared_list"/>
          <div class="kong-state" v-show="!compared_list.length">
            <div class="flex f-dir align-center kong-box">
              <img class="kong" src="@/assets/appraise/icon/kongzhuangtai.png" alt=""/>
              <div class="kong-text">选择后再查看内容哦~</div>
            </div>
          </div>
        </div>
        <Transfer v-model="transferShow" :personList="personnel_list" :compareIds="compare_id"  isPersonCheck @allShuttleBox="allShuttleBox" />

      </el-main>
    </el-container>
  </div>
</template>

<script>

import ModuleHeader from '@/appraise/components/ModuleHeader'
import HeaderFeatures from '@/appraise/components/HeaderFeatures'
import EitContent from '@/appraise/components/EitContent'
import MailList from '@/appraise/components/MailList'
import { fileDownload, syncRequest } from '@/utils/httpRequet'

import PeopleAcross from '@/appraise/components/PeopleAcross'
import ComparedPlanTableEndlong from '@/appraise/components/comparedPlanTableEndlong'
import ComparedPlanTableAcross from '@/appraise/components/comparedPlanTableAcross'
import Transfer from '@/appraise/components/Transfer'

export default {
  name: 'diaryIndex',  //日记录
  components: {
    ModuleHeader,
    HeaderFeatures,
    EitContent,
    MailList,

    PeopleAcross,
    ComparedPlanTableEndlong,
    ComparedPlanTableAcross,
    Transfer
  },
  filters: {
    typeStr: function(value) {
      const str = {
        '1': '重要',
        '2': '日常',
        '3': '其他'
      }
      return str[value]
    }
  },
  data() {
    return {
      is_compare: false,
      transferShow: false,
      type: 0,
      visible: false,
      form_type_index: 2,
      currentNodeKey: '',
      compare_id: [],
      name_list: [],//对比人或部门
      is_switchover: 0,
      is_change_table: 2,
      compared_list: [], //对比列表
      compared_type: 2, //对比类型
      time_tree_copy: [],
      time_tree: [],
      left_pitch: [], // 选中节点
      left_open_list: [], // tree默认展开
      yearList: [], // tree默认显示
      isShow: false,
      personnel_list: [],//人员穿梭框数据

      search_text: '',
      date_list: [],
      record_date: '',
      is_loading: false,
      exist_data: false,
      my_id: '',
      user_name: '',
      user_id:'',
      mouth_List: [],
      month: Object.freeze(['01','02','03','04','05','06','07','08','09','10','11','12']),
      user_or_part:0,
      STATUS: Object.freeze({
        0: '提交审核',
        1: '待审核',
        2: '已拒绝',
        3: '已通过'
      }),
      form_type: [
        {text:'重要事宜',type:'1',is_checked:true},
        {text:'日常事宜',type:'2',is_checked:true},
        {text:'其他事宜',type:'3',is_checked:true}
      ],
      time_range: [
        {text:'最近一个周',type:'1',is_checked:false},
        {text:'最近一个月',type:'2',is_checked:false}
      ],
      time_limit: '',
      time_range_index:-1,
      header_right: [
        { url: 'appraiseout', text: '导出', type: 0 },
        // { url: 'appraisedy', text: '打印', type: 1 }
      ],
      time_list: [],
      table_items: [],
      font_change: {
        font_size: 1,
        font_family: 1,
        type_content: -1
      },//字体选择
      time_or_list: true,
      duty_list: [
        { url: 'appraisediary', title: '日记录' },
        { url: 'appraiseweek', title: '周纪实' },
        { url: 'appraisemonth', title: '月小结' }
      ],
      float_list: [
        {
          f_name: '我部门成员',
          is_select: false,
          is_unfold: true,
          child: []
        },
        {
          f_name: '最近@我的人',
          is_select: false,
          is_unfold: true,
          child: []
        },
        {
          f_name: '我关注的人员',
          is_select: false,
          is_unfold: true,
          child: []
        }
      ],
      userList: [],
      pagination: {},

    }
  },
  mounted() {
    this.init()
    this.initTable()
    //处理选项开始、结束时间
    this.time_range[0].end_time = this.formateDate(new Date())
    this.time_range[1].end_time = this.formateDate(new Date())
    const start_week = new Date()
    start_week.setTime(start_week.getTime() - 3600 * 1000 * 24 * 7)
    this.time_range[0].start_time = this.formateDate(start_week)
    const start_month = new Date()
    start_month.setTime(start_month.getTime() - 3600 * 1000 * 24 * 30)
    this.time_range[1].start_time = this.formateDate(start_month)
    //拿取登录者信息
    this.user_name = this.$store.state.user.userInfo.realName
    this.my_id = this.$store.state.user.userInfo.userId
    this.user_id = this.my_id
    //月份选项
    const year_this = new Date().getFullYear()
    this.month.forEach(res => {
      const item = {
        label: year_this + '-' + res,
        value: year_this + res
      }
      this.mouth_List.push(item)
    })

    const res = syncRequest({ url: 'pubQueryUserList', data: { orgId: '', name: '' } })
    // console.log( '@ 候选人' ,res)
    // console.log(res.data)
    if (res.errorCode === '1') this.userList = res.data
  },
  methods: {
    //初始化
    init(id,date,word) {
      //获取个人日记录内容
      const daily_get_all = syncRequest({
        url: 'dailyGetAll',
        method: 'POST',
        data: {
          userId: id?id:'',
          recordDate: date?date:'',
          queryWord: word?word:'',
        }
      })
      if(daily_get_all.errorCode === '1') {
        this.time_list= daily_get_all.data
        this.time_list.forEach(res=> {
          res.contentList.forEach(result => {
            this.$set(result,'eit_time',false)
            this.$set(result,'is_eit',false)
          })
        })
      }
    },
    //初始化表格
    initTable(id,page,start_time,end_time,class_list) {
      //获取个人日记录内容
      const daily_get_all = syncRequest({
        url: 'queryPageTable',
        method: 'POST',
        data: {
          userId: id?id:'',
          page: page?String(page):'1',
          classList: class_list?class_list:'',
          queryStartTime: start_time?start_time:'',
          queryEndTime: end_time?end_time:'',
        }
      })
      if(daily_get_all.errorCode === '1') {
        this.pagination = daily_get_all.page
        this.errorCodeSuccess(daily_get_all.data)
      }
    },
    //初始化成功
    errorCodeSuccess(success) {
      this.table_items = []
      success.forEach(item => {
        item.contentList && item.contentList.forEach( (text_item, text_index) => {
          let temp_items = {
            time_date: item.recordDate,
            recordClass: text_item.recordClass,
            text_index: text_index += 1,
            content: text_item.htmlText,
            progress: text_item.progress,
            startTime:text_item.startTime,
            endTime:text_item.endTime,
          }
          this.table_items.push(temp_items)
        })
      })
    },
    /**
     * @name 确认时间范围
     */
    confirmTimeLimit() {
      console.log(this.time_limit)
    },
    /**
     * @name 新增内容
     */
    handleAddDuty(e,item,index) {
      const add_content = syncRequest({
        url: 'dailyAddContent',
        method: 'POST',
        data: {
          recordDate: item.recordDate,
          content: e.item.content,
          class: e.item.recordClass,
          planSubId: e.item.planSubId?e.item.planSubId:'',
          state: e.item.state?e.item.state:'',
          startTime: e.item.startTime?e.item.startTime:'',
          endDate: e.item.endDate?e.item.endDate:'',
          contentFileList: e.item.contentFileList?e.item.contentFileList:''
        }
      })
      if(add_content.errorCode === '1') {
        this.time_list[index].contentList[e.index].recordDailyId = add_content.data.recordDailyId
        this.time_list[index].contentList[e.index].htmlText = add_content.data.htmlText
        this.time_list[index].contentList[e.index].recordDate = add_content.data.recordDate
        this.time_list[index].contentList[e.index].text = add_content.data.text
        this.time_list[index].contentList[e.index].userId = add_content.data.userId
        this.time_list[index].contentList[e.index].userName = add_content.data.userName
        this.$message.success({ message: '增加成功', center: true })
      }
    },
    /** 编辑日记录内容
     *
     */
    handleEitContent(e,index) {
      const eit_content = syncRequest({
        url: 'dailyEditContent',
        method: 'POST',
        data: {
          recordDailyId: e.item.recordDailyId,
          content: e.item.content,
          progress: e.item.progress,
          class: e.item.recordClass,
          planSubId: e.item.planSubId?e.item.planSubId:'',
          state: e.item.state?e.item.state:'',
          startTime: e.item.startTime?e.item.startTime:'',
          endTime: e.item.endTime?e.item.endTime:'',
          contentFileList: e.item.contentFileList?e.item.contentFileList:''
        }
      })
      if(eit_content.errorCode === '1') {
        if(e.item.planSubId) {
          this.time_list[index].contentList[e.index].progress = eit_content.data.progress
        }
        if(e.item.contentFileList) {
          const file_obj = {
            attachId: e.item.contentFileList,
            fileName: e.item.fileName
          }
          this.time_list[index].contentList[e.index].fileList.push(file_obj)
        }else{
          this.time_list[index].contentList[e.index].fileList = []
        }
        this.$message.success({ message: '编辑成功', center: true })
      }else{
        this.$message.error({ message: '请先对齐关联计划', center: true })
        this.time_list[index].contentList[e.index].state = '1'
      }
      console.log( '---' ,this.time_list[index])
    },
    /**
     * @name 删除内容
     */
    handleDeleteDuty(e) {
      let del_content = syncRequest({
        url: 'dailyDelContent',
        data: {
          recordDailyId:e.item.recordDailyId
        }
      })
      const errorCode = del_content.errorCode === '1'
      this.$message({
        message: errorCode ? '删除成功' : '删除失败',
        type: errorCode ? 'success' : 'error',
        duration: 2000,
        center: true
      })
    },
    /**  选择日期
     */
    selectTime(e) {
      if(!this.date_list || !this.date_list.length) return this.deal_date_list = ''
      let deal_date_list = []
      this.date_list.forEach(res => {
        deal_date_list.push(this.formateDate(res))
      })
      this.deal_date_list = deal_date_list.join(',')
    },
    /**  查询
     */
    fondDiary() {
      this.init('',this.deal_date_list,this.search_text)
    },
    formateDate(data) {
      let year = data.getFullYear()
      let month = data.getMonth() + 1
      let day = data.getDate()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      return year + '-' + month + '-' + day
    },
    /**
     *@name 选择时间范围
     */
    handleChangeTime(index) {
      if(this.time_range_index == index) {
        this.time_range[index].is_checked = false
        this.time_range_index = -1
        return
      }
      this.time_range.forEach(res=> {
        res.is_checked = false
      })
      this.time_range[index].is_checked = true
      this.time_range_index = index
    },
    /**
     *@name 查询
     */
    handleInquire() {
      const class_list = []
      this.form_type.forEach(res=>{
        if(res.is_checked) {
          class_list.push(res.type)
        }
      })
      const class_str = class_list.join(',')
      let time_range = false
      let state_str = ''
      let end_str = ''
      this.time_range.forEach(res=>{
        if(res.is_checked) {
          time_range = true
          state_str = res.start_time
          end_str = res.end_time
        }
      })
      if(time_range && this.time_limit) return this.$message.error({ message: '记录时间和时间范围只能选择一项', center: true })
      if(this.time_limit) {
        state_str = this.formateDate(this.time_limit[0])
        end_str = this.formateDate(this.time_limit[1])
      }
      this.initTable(this.user_id,1,state_str,end_str,class_str)
    },
    //合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0].includes(columnIndex)) {
        let first_idx = this.table_items.findIndex(
          (item) => item.time_date === row.time_date
        )
        let same_length = this.table_items.filter(
          (x) => x.time_date === row.time_date
        ).length

        return rowIndex === first_idx ? [same_length, 1] : [0, 0]
      }
    },
    /**  导出表格
     */
    handleExportTable() {
      this.is_loading = true
      let class_str = ''
      this.time_range.forEach(res=>{
        if(res.is_checked) {
          class_str = res.type
        }
      })
      let state_str = ''
      let end_str = ''
      if(this.time_limit) {
        state_str = this.formateDate(this.time_limit[0])
        end_str = this.formateDate(this.time_limit[1])
      }
      if(this.time_limit && class_str) return this.$message.error({ message: '记录时间和时间范围只能选择一项', center: true })
      fileDownload("expTable",{
        param:{
          userId: this.compare_id,
          queryWord: '',
          queryStartTime: state_str,
          queryEndTime: end_str,
          timeTag:class_str?class_str:''
        }
      })
      setTimeout(()=> {
        this.is_loading = false
      },2000)
    },
    /**
     * @name 导出
     */
    handleExport() {
      if(!this.is_loading) {
        this.is_loading = true
        fileDownload("expCompare",{
          param:{
                  userId: this.compare_id,
                  direction: this.is_switchover === 0 ? 'transverse' : 'portrait',
                  recordDate: this.getWeekDay().join(',')
                }
        })
        setTimeout(()=> {
          this.is_loading = false
        },2000)
      }
    },
    /**  人员日小结
     */
    handleManDuty(e) {
      console.log(e)
      this.user_id = e.id
      this.user_name = e.name
      this.user_or_part = e.type
      this.form_type.forEach(res=>res.is_checked = true)
      this.time_limit = ''
      this.time_range.forEach(res=>res.is_checked = false)
      this.init(e.id)
      this.initTable(e.id)
    },
    /**  分页
     */
    currentChange(e) {
      this.initTable(this.user_id,e)
    },
    // 获取本周的日期
   getWeekDay() {
      let self = this
      let dateString = this.formateDate(new Date());
      let presentDate = new Date(dateString);
      let today = presentDate.getDay() !== 0 ? presentDate.getDay() : 7;
      return Array.from(new Array(7), function (val, index) {
        return self.formateDate(new Date(presentDate.getTime() - (today - index - 1) * 24 * 60 * 60 * 1000));
      });
    },
    /**  人员对比
     */
    recordCompared(id) {
      this.compare_id = id
      this.diaryCompare(id)
      this.is_compare = !this.is_compare
    },
    //对比
    diaryCompare(id) {
      const compare_record = syncRequest({
        url: 'compareRecord',
        method: 'POST',
        data: {
          userIdList: id.join(','),
          timeStr: this.getWeekDay().join(','),
        }
      })
      if(compare_record.errorCode === '1') {
        this.is_change_table = 2
        this.compared_list = compare_record.data
        setTimeout(()=> {
          this.is_change_table = this.is_switchover
        },200)
      }
    },
    /**  打开穿梭框
     */
    handleCompared() {
      // this.isShow = true

      this.transferShow = true

      const res = syncRequest({
        url: 'pubGetDeptUserTree',
      })
      if (res.errorCode == '1') {
        this.personnel_list = res.data //[0].children
      }
    },
    /**  改变布局
     */
    handleChange() {
      this.is_switchover = this.is_switchover === 0 ? 1 : 0
      this.is_change_table = this.is_switchover
    },
    /**  结束对比
     */
    handleStopCompare() {
      this.is_compare = !this.is_compare
    },
    //穿梭框子组件向父组件传参
    allShuttleBox(val) {
      console.log( 'val --' , val)
      this.compare_id = []
      val.forEach(res => this.compare_id.push(res.id))
      this.diaryCompare(this.compare_id)
    },
  }
}
</script>

<style scoped lang="scss">
.el-header {
  height: auto !important;
  background-color: #F0F0F3;
  color: #333;
  margin-right: 10px;
  padding-bottom: 10px !important;
}
.flex {
  display: flex;
}
::v-deep .el-table__empty-block {
  min-height: 200px;
}
.flex-a {
  align-items: center;
}

.flex-j {
  justify-content: center;
}

.flex-1 {
  flex: 1;
}
::v-deep .el-input__inner {
  font-size: 16px;
}
.head-text {
  font-size: 20px;
  margin-left: 2px;
}
.f-w-700 {
  font-weight: 700;
}

.color-1966E2 {
  color: #1966E2;
}

.month-box {
  padding: 17px 0 0 40px;
  background-color: #FCFCFC;
}

.b-b-1 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.jin-du {
  font-size: 16px;
  color: #999999;
  margin-left: 7px;
}
.top-head-content {
  flex-direction: row-reverse;
}
.float-man-l-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  font-size: 16px;
  color: #ffffff;
  background-image: linear-gradient(rgba(241, 188, 87, 1), rgba(249, 172, 121, 1));
  box-shadow: 0 4px 8px 0 rgba(209, 209, 209, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .user-tag {
  color: #fff;
  background-color: #07f;
  padding: 0 5px;
  border-radius: 999em;
  display: inline-block;
  user-select: all;
}
.top-head {
  font-size: 16px;
  display: flex;
}
::v-deep .vxe-modal--title {
  font-size: 20px;
}
::v-deep .vxe-modal--body {
  position: relative;
}
.top-text {
  padding: 3px 10px;
  margin-left: 8px;
  background-color: #3280FC;
  color: #FFFFFF;
  border-radius: 6px;
  cursor: pointer;
}
.cursor-p {
  cursor: pointer;
}
.top-head-right {
  padding: 1px 10px;
  border: 1px solid #1C66E2;
  color: #1C66E2;
  border-radius: 6px;
  font-size: 16px;
  margin-left: 15px;
  display: flex;
  align-items: center;
}
.f-s-16 {
  width: 68px;
  font-size: 16px;
  color: #999999;
  margin-right: 25px;
}
.f-s-16-1 {
  font-size: 16px;
}
.box-form {
  width: 100%;
  background-color: #FFFFFF;
  padding: 10px;
}
.search-text {
  width: 164px;
  font-size: 16px;
  margin-right: 6px;
}
.form-content-1 {
  padding: 10px 20px 9px 0;
  display: flex;
  align-items: center;
  position: relative;
}
.form-content {
  padding: 20px 20px 9px 0;
  display: flex;
  align-items: center;
  position: relative;
}

.f-s-20 {
  font-size: 20px;
}

.content-bit {
  width: 17px;
  height: 17px;
  margin-top: 6px;
  border-radius: 1px;
  background-color: rgba(59, 117, 255, 1);
  color: #FFFFFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-text-1 {
  flex: 1;
  margin-left: 7px;
  font-size: 16px;
  padding-bottom: 12px;
}
.content-text-2 {
  flex: 1;
  font-size: 16px;
  padding-bottom: 12px;
}
.inquire {
  padding: 6px 14px;
  color: #FFFFFF;
  background-color: #1C66E2;
  border: 1px solid #1C66E2;
  border-radius: 4px;
  box-shadow: 0 0 2px 0 #1C66E2;
  font-size: 16px;
  position: absolute;
  top: -36px;
  right: 20px;
}

::v-deep .el-checkbox {
  margin-right: 22px;
}
::v-deep .el-checkbox__label {
  font-size: 16px;
}
.el-aside {
  background-color: #E9EEF3;
  padding:0;
}
.main-box {
  font-size: 16px;
  background-color: #E9EEF3;
  user-select: none; padding: 12px;
}
::v-deep .vxe-modal--header {
  text-align: center;
}
.mail-list {
  width: 100%;
  height: 100%;
}
.my-duty {margin-right: 12px; border-radius: 4px;
}
::v-deep .el-scrollbar__wrap {
  height: 100%;
  overflow-x: auto;
}
.box-card {
  width: 100%;
  background-color: #ffffff;
  padding: 10px; border-radius: 4px;
}

.card-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-b-14 {
  margin-bottom: 10px;
}
.main-box-1 {
  width: 100%;
  user-select: none;
  padding: 10px 0 10px 10px;
  font-family: "Microsoft Yahei";
  background-color: #F0F0F3;
}

.my-duty-1 {
  margin-right: 10px;
  border-radius: 4px;
}
.inquire-1 {
  color: #1890ff;
  background-color: #e8f4ff;
  border: 1px solid #a3d3ff;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-dir {
  flex-direction: column;
}

.align-center {
  align-items: center;
}


::v-deep .user-tag {
  color: #fff;
  background-color: #07f;
  padding: 2px .4em;
  border-radius: 999em;
}

::v-deep .el-select {
  height: 36px;
}

::v-deep .el-select__tags {
  max-width: 140px !important;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.head-left {
  display: flex;
  align-items: center;
}

.compared {
  font-family: PingFangSC;
  margin-left: 41px;
  font-size: 16px;
  color: #1C65E3;
}

.head-right {
  display: flex;
  align-items: center;
}

.head-right > button > img {
  width: 15px;
  height: 15px;
}

.head-right > button {
  margin-left: 15px;
  font-size: 16px;
}

.head-right > p:nth-child(1) {
  margin-right: 5px;
}

.head-right > p:nth-child(3) {
  margin-left: 5px;
}

.time-select-box {
  display: flex;
  align-items: center;
  position: relative;
  right: 4.5rem;
}

.btn-switch {
  width: 100px;
  height: 35px;
  opacity: 1;
  background: #1a66e2;
  border-radius: 6px;
  color: #fff;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.btn-unified {
  width: 75px;
  height: 35px;
  background: #ffffff;
  border: 1px solid #1c66e2;
  border-radius: 7px;
  color: #1c66e2;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.content {
  height: calc(100vh - 186px);
  background-color: #FFFFFF;
}

/*空状态样式*/
.kong-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kong {
  width: 190px;
  height: 190px;
  margin-bottom: 30px;
}

.kong-box {
  position: relative;
  top: 19px;
}

.kong-text {
  font-size: 18px;
  color: rgba(153, 153, 153, 1);
}
.text-font {
  font-size: 16px;
  color: #1890ff;
  display: flex;
}
.time-tree {
  max-height: 380px;
  overflow-y: auto;
}
::v-deep .el-tree-node__content > label.el-checkbox {
  margin-left: 14px;
}

::v-deep .el-tree-node__label {
  font-size: 16px;
}
.person_body{ width: 100%;
  .my-duty:last-child{ margin-bottom: 0px; padding-bottom: 0px;}
}
@media (max-width: 1060px) {
  .head-text {
    font-size: 18px;
    margin-left: 2px;
  }
  .float-man-l-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
    color: #ffffff;
    background-image: linear-gradient(rgba(241, 188, 87, 1), rgba(249, 172, 121, 1));
    box-shadow: 0 4px 8px 0 rgba(209, 209, 209, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jin-du {
    font-size: 14px;
    color: #999999;
    margin-left: 7px;
  }
  ::v-deep .el-input__inner {
    font-size: 14px;
  }
  ::v-deep .help—change .el-input__inner {
    width: 120px;
  }
  .search-text {
    width: 164px;
    font-size: 14px;
    margin-right: -22px;
  }
  .top-head {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
  ::v-deep .vxe-modal--title {
    font-size: 18px;
  }
  .top-head-right {
    padding: 1px 10px;
    border: 1px solid #1C66E2;
    color: #1C66E2;
    border-radius: 6px;
    font-size: 14px;
    margin-left: 15px;
    display: flex;
    align-items: center;
  }
  .f-s-16 {
    width: 68px;
    font-size: 14px;
    color: #999999;
    margin-right: 25px;
  }
  .f-s-16-1 {
    font-size: 14px;
  }
  .f-s-20 {
    font-size: 18px;
  }

  .content-bit {
    width: 17px;
    height: 17px;
    margin-top: 6px;
    border-radius: 1px;
    background-color: rgba(59, 117, 255, 1);
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content-text-1 {
    flex: 1;
    margin-left: 7px;
    font-size: 14px;
    padding-bottom: 12px;
  }
  .content-text-2 {
    flex: 1;
    font-size: 14px;
    padding-bottom: 12px;
  }
  .inquire {
    padding: 6px 14px;
    color: #FFFFFF;
    background-color: #1C66E2;
    border: 1px solid #1C66E2;
    border-radius: 4px;
    box-shadow: 0 0 2px 0 #1C66E2;
    font-size: 14px;
    position: absolute;
    top: -36px;
    right: 20px;
  }

  ::v-deep .el-checkbox {
    margin-right: 22px;
  }
  ::v-deep .el-checkbox__label {
    font-size: 14px;
  }
  .el-aside {
    background-color: #E9EEF3;
    padding:0;
  }
  .main-box {
    font-size: 14px;
    background-color: #E9EEF3;
    user-select: none; padding: 12px;
  }
  ::v-deep .vxe-modal--header {
    text-align: center;
  }
  .mail-list {
    width: 100%;
    height: 100%;
  }
  .my-duty {margin-right: 12px; border-radius: 4px;
  }

  .box-card {
    width: 100%;
    background-color: #ffffff;
    padding: 10px; border-radius: 4px;
  }

  .card-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .m-b-14 {
    margin-bottom: 10px;
  }
  .text-font {
    font-size: 14px;
    color: #1890ff;
    display: flex;
  }
  ::v-deep .el-tree-node__label {
    font-size: 14px;
  }
  .compared {
    font-family: PingFangSC;
    margin-left: 41px;
    font-size: 14px;
    color: #1C65E3;
  }
  ::v-deep .el-checkbox__label {
    font-size: 14px;
  }
  .head-right > button {
    margin-left: 15px;
    font-size: 14px;
  }

  .kong-text {
    font-size: 16px;
    color: rgba(153, 153, 153, 1);
  }
}
</style>
